<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<img src="../../assets/img/head/logo.png" class="logo" alt="" />
				<div class="title">
					运营商管理平台
				</div>
				<el-input v-model="input4"
					style="width: 8.75rem;height: 1.17rem;border-radius: 50%;margin-left: 1.83rem;"
					placeholder="搜索功能/模块">
					<template #prefix>
						<img src="../../assets/img/head/sousuo.png" class="sousuo" alt="" />
					</template>
				</el-input>
				<img src="../../assets/img/head/acc.png" class="acc" alt="" />
				<div class="acctext">
					13306236880
				</div>
			</el-header>
			<el-container class="con">
				<el-aside>
					<div class="menu">
						<div class="" style="background-color: #113b5a;padding-bottom: 2rem;">
							<div class="menu__item" v-for="(item,index) in menulist" :key="index"
								@click="curindex=index">
								<img :src="getAssetURL('../../assets/img/menu/m'+(index*2+2)+'.png')" class="micon" alt=""
									v-if="curindex==index" />
								<img :src="getAssetURL('../../assets/img/menu/m'+(index*2+1)+'.png')" class="micon" alt=""
									v-else />
								<div class="menutext" :class='curindex==index?"activetext":""'>
									{{item.name}}
								</div>
							</div>
						</div>
					</div>
					<div class="menu1">
						<div class="" style="background-color: #215077;padding-bottom: 2rem;">
							<div class="menu1__item" :class='curindex1==(curindex+"-"+index)?"active":""' v-for="(item,index) in menulist[curindex].submenu" :key="index"
								@click="curindex1=(curindex+'-'+index)">
								{{item.text}}
							</div>
						</div>
					</div>
				</el-aside>
				<el-main>
					<div class="breadcrumb">
						<div class="breadcrumb__item">
							常用工具   ＞   数据概况
						</div>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	import {
		Search
	} from '@element-plus/icons-vue'
	export default {
		data() {
			return {
				input4: '',
				curindex: 0,
				curindex1:'0-0',
				menulist: [{
						name: '常用工具',
						icon: 'm1',
						activeicon: 'm2',
						submenu:[
							{text:'数据概况'}
						]
					},
					{
						name: '设备管理',
						icon: 'm1',
						activeicon: 'm2',
						submenu:[
							{text:'数据概况'}
						]
					},
					{
						name: '商品管理',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '订单管理',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '策略管理',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '报警监控',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '广告管理',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '广告收益',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '运营监控',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '数据中心',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '财务中心',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '系统管理',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '提货卡管理',
						icon: 'm1',
						activeicon: 'm2'
					},
					{
						name: '用户管理',
						icon: 'm1',
						activeicon: 'm2'
					},
				]
			}
		},
		methods: {
			getAssetURL(image){
				// 参数一: 相对路径
				// 参数二: 当前路径的URL
				console.log(image)
				return new URL(image, import.meta.url).href
			}
		}
	}
</script>
<style scoped lang="scss">
	.common-layout {
		height: 100%;
	}

	.con {
		height: calc(100% - 2.11rem)!important;
	}

	.el-container {
		height: 100%;
	}

	.el-aside {
		width: calc(4rem + 5.75rem);
		min-height: 100%;
		display: flex;
		
	}
	.el-main{
		background-color: #f0f0f0;
		padding: 0;
	}
	.el-header {
		background-color: #215077;
		width: 100%;
		height: 2.11rem;
		display: flex;
		align-items: center;

		.logo {
			height: 1rem;
			vertical-align: middle;
			border-style: none;
			margin-left: 0.75rem;
		}

		.title {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 0.66rem;
			color: #FFFFFF;
			margin-left: 1.28rem;
		}

		.acc {
			height: 0.83rem;
			vertical-align: middle;
			border-style: none;
			margin: 0 0.67rem 0 1.17rem;
		}

		.acctext {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 0.67rem;
			color: #FFFFFF;
		}
	}

	.sousuo {
		width: 1rem;
		height: 1.1rem;
	}

	.micon {
		width: 2rem;
		height: 2rem;
	}

	.menutext {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 0.49rem;
		color: #FFFFFF;
	}

	.activetext {
		color: #F0A93E;
	}

	.menu__item {
		margin-top: 1.25rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}

	.menu {
		// padding-bottom: 1.25rem;
		width: 4rem;
		background-color: #113b5a;
		overflow-y: auto;
	}
	.menu1{
		width: 5.75rem;
		// padding-bottom: 1.25rem;
		background-color: #215077;
		overflow-y: auto;
		&__item{
			// width: 5.20rem;
			line-height: 1.92rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 0.49rem;
			color: #FFFFFF;
			cursor: pointer;
			padding-left: 0.55rem;
		}
		.active{
			background-color: #f0a93e;
		}
	}
	.breadcrumb{
		height: 1.92rem;
		display: flex;
		align-items: center;
		padding-left: 0.64rem;
		&__item{
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 0.49rem;
			color: #7F7F80;
		}
	}
</style>